<style src="./index.scss" lang="scss" scoped></style>
<template>
    <main class="page-base-box" :class="{enter: pageEnter}" ref="pageBaseRef">
        <!-- <header class="page-base-header"
            :class="{ sticky: headerSticky === headerStickyValue}"
            ref="pageBaseHeaderRef" v-if="showHeader">
            <slot name="header" v-bind:data="{ headerSticky }"></slot>
        </header> -->
        <header class="page-base-header"
            ref="pageBaseHeaderRef" v-if="showHeader">
            <slot name="header"></slot>
        </header>
        <section class="page-base-body">
            <slot></slot>
        </section>
        <footer class="page-base-footer" v-if="showFooter">
            <slot name="footer"></slot>
        </footer>
    </main>
</template>

<script lang="ts">
import { defineComponent, ref, toRef, computed, onMounted } from 'vue';
// import { ObserverEvent } from "@/utils";
export default defineComponent({
    props: {
        layout: {
            type: String,
            default: 'header,footer'
        }
    },
    setup(props) {
        const pageBaseRef = ref();
        const pageBaseHeaderRef = ref();
        const pageEnter = ref(false);
        // const headerStickyValue = ref(60);
        // const headerSticky = ref(0);
        const _layout = toRef(props, 'layout');
        const showHeader = computed(() => _layout.value.indexOf('header') !== -1);
        const showFooter = computed(() => _layout.value.indexOf('footer') !== -1);


        // const bindAndEmitScroll = () => {
        //     const diff = headerStickyValue.value;
        //     let endChange = 0;
        //     const scrollEvent = ObserverEvent(pageBaseRef.value, "scroll", (e: any) => {
        //         const { scrollTop } = e.target;
        //         const { clientHeight } = pageBaseHeaderRef.value;
        //         endChange = Math.max(clientHeight - scrollTop, diff);
        //         headerSticky.value = scrollTop === 0 ? scrollTop : endChange;
        //         emit('body-scroll', e);
        //     });
        //     onBeforeUnmount(() => {
        //         scrollEvent.destroy();
        //     });
        // };
        onMounted(() => {
            setTimeout(() => {
                pageEnter.value = true;
                // bindAndEmitScroll();
            }, 100);
        });
        return {
            pageBaseRef,
            pageBaseHeaderRef,
            pageEnter,
            // headerStickyValue,
            // headerSticky,
            showHeader,
            showFooter
        };
    }
});
</script>
